<template>
    <div class="container">
        <div class="back" @click="$router.push('/home')">返回首页</div>
        <div class="header white">
            <div class="avatar">
                <van-image
                        round
                        width="4.375rem"
                        height="4.375rem"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578276227&di=b46d9ec5de6e38bab08caeacb1b35c59&imgtype=jpg&er=1&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F02%2F1533149048-CDikvdRBLP.jpeg"
                ></van-image>
            </div>
            <div class="info">
                <span class="name">徐 杨</span>
                <span class="announce">我也曾盼望有一个人,将我好好收藏，妥善安放，免我苦，免我惊，免我四下流离，免我无枝可依</span>
            </div>
        </div>
        <div class="rank">
            <div class="block">
                <span class="num">50</span>
                <span class="desc">当前票数</span>
            </div>
            <div class="block">
                <span class="num">01</span>
                <span class="desc">当前排名</span>
            </div>
            <div class="block">
                <span class="num">00</span>
                <span class="desc">距上一名</span>
            </div>
        </div>
        <div class="vote white">
            <div class="top">
                <div class="left-line line"></div>
                <span class="desc">TA 已获得 50 票,排名第一名</span>
                <div class="heart line"></div>
                <div class="right-line line"></div>
            </div>
            <span class="button">
                <van-button type="danger" color="#d43c33">投票</van-button>
            </span>

        </div>
        <div class="photo-tab">
            <div class="tab">
                <span class="block"></span>
                <span class="cn">照片</span>
                <span class="tag">/</span>
                <span class="en">ALBUM</span>
            </div>
            <div class="box">
                <van-image
                        width="18.125rem"
                        height="13.75rem"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577681510291&di=3396eb768cf7a1eb231f906ce92f2492&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F17%2F20170417095544_vPJGe.thumb.700_0.jpeg"
                ></van-image>
            </div>
            <div class="left block"></div>
            <div class="right block"></div>
        </div>
    </div>
</template>

<script>
    import {
        Image,
        Button,
    } from 'vant'
    export default {
        name: 'detail',
        components: {
            [Image.name]: Image,
            [Button.name]: Button,
        },
    }
</script>

<style scoped lang="scss">
    .back{
        position: absolute;
        left: 0rem;
        top: 0rem;
        width: 4.68rem;
        height: 1.8rem;
        background: rgba(255,255,255,1);
        border-top-right-radius: 1.17rem;
        border-bottom-right-radius: 1.17rem;
        color: rgba(0,0,0,0.7);
        line-height: 1.8rem;
        text-align: center;
        font-size: 0.75rem;
        z-index: 999;
    }
    .container::before {
        background: url("../../../assets/bg2.png");
        width: 23.4375rem; //
        height: 40rem;
        opacity: 0.8;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-size: cover;
        -webkit-filter: blur(1px);
        filter: blur(1px);
    }
    .container{
        width: 21.875rem; //
        height: 40rem;
        padding: 1.1rem 0.78rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .white {
        background-color: #fffdef;
    }
    .header {
        padding: 0.6375rem 0.375rem;
        height: 4.5rem;
        width: 21.125rem;
        display: flex;
        .avatar {
            width: 4.375rem;
            height: 4.375rem;
            margin-right: 0.68rem;
        }
        .info {
            display: flex;
            flex-direction: column;
            .name{
                font-size: medium;
                padding-bottom: 0.2rem;
            }
            .announce{
                font-size: small; // 16px
                color: #555;
                // text-indent: 2rem;
                letter-spacing: 0.08rem;
            }
        }
    }
    .rank {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 3.9rem;
        .block {
            width: 4.6875rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fffdef;
            .num {
                color: #d43c33;
                font-size: large;
            }
            .desc {
                color: #666;
            }
        }
    }
    .vote{
        height: 8.75rem;
        width: 21.875rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: relative;
        .top {
            .line {
                position: absolute;
                top:4.5rem;
            }
            .left-line {
                width: 5rem;
                height: 1px;
                border-top: solid #d43c33 1px;
            }
            .desc {
                font-size: 1.3rem;
                color: #666;
            }
            .right-line {
                right: 2.75rem;
                width: 5rem;
                height: 1px;
                border-top: solid #d43c33 1px;
            }
            .heart {
                top:3.3rem;
                left: 9.7rem;
                width: 2.4rem;  // 0.7
                height: 2.27rem;
            }
            .heart:before,
            .heart:after {
                position: absolute;
                content: "";
                left: 1.2rem;
                top: 0;
                width: 1.2rem;
                height: 1.9rem;
                background: #d43c33;
                -moz-border-radius: 1.2rem 1.2rem 0 0;
                border-radius: 1.2rem 1.2rem 0 0;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transform-origin: 0 100%;
                -moz-transform-origin: 0 100%;
                -ms-transform-origin: 0 100%;
                -o-transform-origin: 0 100%;
                transform-origin: 0 100%;
            }
            .heart:after {
                left: 0;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transform-origin: 100% 100%;
                -moz-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                -o-transform-origin: 100% 100%;
                transform-origin :100% 100%;
            }
        }


        button {
            width: 7.3125rem;
            height: 2.1875rem;
            line-height: 2.1875rem;
            font-size: 1.1rem;
            letter-spacing: 0.2rem;
            border-radius: 0.3rem;
        }
    }

    .photo-tab{
        height: 17.1875em;
        width: 21.875rem;
        //align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        .tab {
            background-color: #fffdef;
            width: 6.875rem;
            height: 1.875rem;
            border-radius: 0.3rem;
            color: #666;
            display: flex;
            align-items: center;
            justify-content:flex-start;
            font-size: small;
            position: relative;
            .block{
                position: absolute;
                top:0.6rem;
                left: 0.375rem;
                width: 0.2rem;
                height: 0.8rem;
                background-color: #d43c33;
            }
            .cn {
                margin-left: 0.8rem;
                letter-spacing: 0.2rem;
            }
            .tag{

            }
            .en {
                margin-left: 0.2rem;
                font-size: xx-small;
            }
        }
        .box {
            margin:0 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 19rem;
            height: 14.6875rem;
            background-color: #fffdef;
            // padding: 0 1.50rem;
        }
        .block {
            opacity: 1;
            width: 1.5625rem;
            height: 3.75rem;
            position: absolute;
            bottom: 0;
        }
        .left {
            // 25 60
            left: 0;
            height:1.75rem;
            width:0;
            border-right:1.75rem solid #fffdef;
            border-top:2.25rem solid transparent;
        }
        .right {
            // 60 96
            right: 0;
            height:1.75rem;
            width:0;
            border-left:1.75rem solid #fffdef;
            border-top:2.25rem solid transparent;
            // border-bottom:60px solid transparent;
        }
    }
</style>
